import React from "react";
import { Typography, IconButton, Box } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import LibraryBooksOutlinedIcon from "@mui/icons-material/LibraryBooksOutlined";
import StarRating from "./StarRating";

function ProjectItem({
  id,
  name,
  rating,
  hasTime,
  time,
  onRatingChange,
  onDelete,
  showDelete,
}) {  
  return (
    <div>
      <Box
        sx={{
          padding: "1rem",
          margin: "0.5rem",
          borderRadius: "32px",
          boxShadow:
            "0px 0px 1px rgba(23, 26, 31, 0.05), 0px 0px 2px rgba(23, 26, 31, 0.08)",
        }}
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            mb: 2,
          }}
        >
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <Box sx={{ display: "flex", alignItems: "center" }}>
              <LibraryBooksOutlinedIcon 
                sx={{ 
                  fontSize: "5vw", 
                  mr: 1,
                  color: "text.primary"
                }} 
              />
              <Typography
                variant="h6"
                sx={{
                  fontFamily: '"ZCOOL KuaiLe", cursive',
                  fontSize: "4vw",
                  fontWeight: 500,
                  color: "text.primary",
                }}
              >
                {name}
              </Typography>
            </Box>
            {hasTime && (
              <Typography
                variant="body2"
                sx={{
                  fontFamily: '"ZCOOL KuaiLe", cursive',
                  color: "text.secondary",
                  fontSize: "3vw",
                  ml: 1
                }}
              >
                ({time}分钟)
              </Typography>
            )}
          </Box>

          {showDelete && (
            <IconButton
              onClick={() => onDelete(id)}
              sx={{
                color: "error.main"
              }}
              aria-label="删除项目"
            >
              <DeleteIcon sx={{ fontSize: "5vw" }} />
            </IconButton>
          )}
        </Box>

        <Box sx={{ display: "flex", alignItems: "center" }}>
          <StarRating
            rating={rating}
            itemId={id}
            onRatingChange={onRatingChange}
          />
        </Box>
      </Box>
    </div>
  );
}

export default ProjectItem;
